<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#fff"
      background-color="#bf4038"
      router
      :default-active="this.$route.path"
    >
      <el-menu-item :index="toString(0)" route="/Index">首页</el-menu-item>
      <el-menu-item
        v-for="(item, index) in menulist"
        :key="item.id + 1"
        :index="(index + 1).toString()"
        :route="'/NewsCategory/' + item.id"
        @click="HandleClick"
        >{{ item.name }}</el-menu-item
      >
      <!-- 此时有一个问题，就是NewsCategory页面与页面之前跳转时，url更新，页面不刷新 -->
    </el-menu>
  </div>
</template>

<style scoped>
.el-menu {
  margin-left: 50px;
  background-color: rgb(191, 64, 56);
}
.el-menu-item {
  color: #fff !important;
  font-size: x-large;
  font-weight: 600;
  margin-right: 20px !important;
}
.el-menu-item:hover {
  background-color: rgb(191, 64, 56) !important;
  font-size: xx-large;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border: none;
  background-color: rgb(191, 64, 56);
}
</style>


<script>
import NewsCategory from "../../api/NewsCategory";
let newsCategory = new NewsCategory();

export default {
  data() {
    return {
      menulist: [],
    };
  },
  methods: {
    async GetNewsCategories() {
      const response = (await newsCategory.getNewsCategories("NewsCategories"));
        // console.log(response);
      return response.data;
    },
    async GetNewsCategoriesByCount(count) {
      const data = (
        await newsCategory.getNewsCategoriesByCount("NewsCategories", count)
      ).data;
      return data;
    },
    HandleClick() {
      // 拿到当前已经更新过的路由
      // const route = this.$route.path;
      // this.$router.push(route);
      //====>>>>完善解决Menu控件点击只更新url不更新页面问题
      window.setInterval(function(){
        window.location.reload();
      },200)
    },

    // 处理点击事件，依据id进行路由跳转
    HandleSelect(key, keyPath) {
      //key为自己设定的id，keyPath为当前元素对应的对象值====>>>>实际改为跳转用menu的route属性
      // this.$router.push(key) 此方法无法在同一个页面进行跳转
      // 刷新页面
      // location.reload(); 也不行
    },
  },

  // computed:{
  //   ...mapGetters(["getnavs"])
  // },

  async mounted() {
    this.menulist = await this.GetNewsCategoriesByCount(8);

    // 将所有的NewsCategory存到vuex中
    const newsCategories=await this.GetNewsCategories();
    // console.log("newsCategories");
    // console.log(newsCategories);
    this.$store.commit("InitializeData",newsCategories)
  },
};
</script>